/**
 * ZHX CTC SCSS
 *
 * Author : Vicco Wang
 * Date : 2016.10.11
 * 
 */
.zhx-ctc-line-tab{
	height:0px;
	overflow:hidden;
	background-color : darken( $greenColor, 3% );
	@include shadow(0,0,8px, darken( $greenColor, 15% ), inset );

	ul{
		height : 100%;
		@include use-flex;
		@include no-select;

		&:before{
			@include use-flex;
			@include flex-align-center;
			font-size:16px;
			margin:3px 10px 0 10px;
			color:darken( $greenColor, 15% );
		}

		li{
			@include use-flex;
			@include flex-align-center;
			flex:1 auto;
			max-width:70px;
			color:#fff;
			border-right:1px solid darken( $greenColor, 8% );
			cursor: default;

			&:first-child{
				border-left: 1px solid darken( $greenColor, 8% );
			}

			&:hover{
				background-color: darken( $greenColor, 6% );
			}
		}
	}

}

//头部定义
.zhx-ctc-header{
	flex:none;
	@include use-flex;
	height:35px;
	position:relative;
	z-index:2;
	font-size:.8em;
	background-color:darken( $lightBaseColor, 2% );
	@include shadow(0,2px,3px, lighten( $baseColor, 60% ) );

	//左侧车牌 车辆信息
	.zhx-ctc-header-plate{
		@include use-flex;
		@include no-select;

		//车牌
		.zhx-ctc-header-p-num{
			width:80px;
			@include use-flex;
			@include flex-align-center;
			background-color: $blueColor;
			font-size:1.5em;
			color: lighten( $lightBaseColor, 100% );
			font-weight:600;
			cursor: pointer;
		}
		//线路信息
		.zhx-ctc-header-p-info{
			flex:1;height:35px;
			background-color:darken( $lightBaseColor, 8% );
			border-right:1px solid lighten( $baseColor, 60% );

			ul{
				@include use-flex;
				height:100%;
				padding:0 8px;

				li{
					@include use-flex;
					@include flex-align-center;
					margin-right:15px;

					span{

						&:last-child{
							font-size:1.4em;
							margin-left:3px;
							font-weight:600;
							color:$blueColor;
						}
					}

					&:last-child{
						margin-right:0;
					}
				}
			}
		}
		//屏幕宽度小于980时，线路信息隐藏
		// @media screen and ( max-width : 980px ){
		// 	.zhx-ctc-header-p-info{
		// 			display: none;
		// 	}
			
		// }

	}
	//屏幕宽度小于980时，线路信息宽度设置为80像素
	// @media screen and ( max-width : 980px ){
	// 	.zhx-ctc-header-plate{
	// 		width: 80px;
	// 	}
		
	// }

	//右侧按钮控制区
	.zhx-ctc-header-controllers{
		flex:1;
		
		ul{
			@include use-flex;
			justify-content:flex-end;
			width:100%;
			border-left:1px solid lighten( $lightBaseColor, 10% );

			li{
				padding:9px 15px;
				border-left:1px solid lighten( $lightBaseColor, 10% );
				border-right:1px solid lighten( $baseColor, 60% );
				// @include frame-transition(all,.2s);
				@include no-select;
				cursor:pointer;

				&:first-child{
					border-left:1px solid lighten( $baseColor, 60% );
				}

				&:last-child{
					border-right:none;
				}

				&:first-child:hover{
					background-color: darken( $lightBaseColor,  7% );
				}

				&:not(:first-child):hover{
					border-left:1px solid darken( $lightBaseColor, 10% );
					background-color: darken( $lightBaseColor, 7% );
				}
				&:active{
					// @include shadow(0,0,10px, darken( $lightBaseColor, 30% ), inset );
				}
			}
		}

	}

}